import React from 'react';
import {Button} from 'antd';
import {WeaDialog, WeaTransfer, WeaInputSearch, WeaSelect} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const { WeaTools } = ecCom;
import './style.css';
import {action, observable} from "mobx";

// 通讯录字段显示设置
class EField_Contants extends React.Component {
    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.renderItem = this.renderItem.bind(this);

        this.state = {
            visible: true,
            eFieldNewDataSource: props.eFieldNewDataSource || [],
            eFieldNewUsedKeys: props.eFieldNewUsedKeys || [],
            value: 'all',
            options: props.options || [],
            optionsinfo: props.optionsinfo || [],
            leftSearchName: '',
            rightSearchName: ''
        };
    }

    /**
     * 过滤列数据
     * @param datas
     * @returns {[]}
     */
    convertSrcDatas = (datas) => {
        const transferDatas = [];

            datas.forEach(data => {
                const {
                    dataIndex,
                    title,
                    group
                } = data;
                transferDatas.push({
                    id: dataIndex,
                    name: title,
                    group
                });
            })

        return transferDatas;
    }

    convertDestdatas = (datas) => {
        const transferKeys = [];

            datas.forEach(data => {
                const {
                    dataIndex
                } = data;
                transferKeys.push(dataIndex);
            });

        return transferKeys;
    }

    render() {
        const {visible, eFieldNewDataSource, eFieldNewUsedKeys, options, value, searchName,optionsinfo} = this.state;
        let bool = options&&options.length>0 ? "true" : "false";
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@rjpjb9`}
                visible={visible}
                title={getLabel(32317, '显示字段设置')}
                icon="icon-coms-portal"
                iconBgcolor='#1a57a0'
                style={{width: 792, height: 490}}
                buttons={this.getButtons()}
                onCancel={this.onCancel}
            >
                <WeaTransfer ecId={`${this && this.props && this.props.ecId || ''}_WeaTransfer@t8p0xi`}
                    className="portal-element-showfieldnew"
                    data={eFieldNewDataSource}
                    renderItem={this.renderItem}
                    selectedKeys={eFieldNewUsedKeys}
                    onChange={(keys) => this.setState({eFieldNewUsedKeys: keys})}
                    leftHeader={<div className="header" style = {{paddingLeft: '24px'}}>
                        <span style={{width:'100px',whiteSpace: 'nowrap',overflow: 'hidden',textOverflow: 'ellipsis',float: 'left'}}>{getLabel('385971', "待选列名")}</span>
                        { bool ==="true" ?
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@oabn27`}
                                options={optionsinfo}
                                value={value}
                                onChange={val => this.onSelectChange(val)}
                                style={{width: 90, marginLeft: 10}}
                            />
                            : ""
                        }
                        <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@vd4899`} style={{width:'100px',float: 'right',margin: '5px 10px 5px 0px'}} onSearch={(value)=>this.setState({leftSearchName: value})}/></div>}
                    rightHeader={<div style={{display: 'inline-block', position: 'relative'}}><span style={{paddingLeft: '15px', position: 'absolute',
                        width: '100px', textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', top: '-25px'}}>{getLabel('385972', "已选列名")}</span><div style={{position: 'absolute',
                        top: '-25px',  width: '90px', left: '238px'}}><WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@yf2143`} onSearch={(value)=>this.setState({rightSearchName: value})}/></div></div>}
                    filterLeft={this.filterLeft.bind(this, eFieldNewDataSource)}
                    filterRight={this.filterRight.bind(this, eFieldNewUsedKeys)}
                />
            </WeaDialog>
        );
    }

    /**
     * 渲染transfer
     * @param item
     * @returns {*}
     */
    renderItem(item){
        const {optionsinfo} = this.state;
        const option = optionsinfo.find(option => option.key === item.group);
        return <div style={{padding:'10px 0 10px 24px',borderBottom:'1px solid #e2e2e2',color:'#333',position:'relative'}}>
            <div>{item.name}</div>
            <div style={{paddingTop:'10px',color:'#333'}}>{option && option.showname}</div>
        </div>
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@w1d8vn`} type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@alrn9v`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }

    onOk() {
        this.props.onOk(this.state);
    }

    onCancel() {
        this.props.onCancel();
    }

    // filterLeft(items){
    //     const { leftSearchName } = this.state;
    //     if (leftSearchName) {
    //         items = items.filter((item)=>item.name.indexOf(leftSearchName.trim()) != -1);
    //     }
    //     return items;
    // }

    filterLeft = (datas) => {
            const {
                value,leftSearchName
            } = this.state;
            const searchVal = leftSearchName.trim();
            //根据搜索条件过滤
            const searchFilter = datas.filter(data => data.name.indexOf(searchVal) > -1);

            if (value === 'all') {
                return searchFilter;
            } else { //下拉框选项不为【全部】时，根据下拉选项再进行一轮过滤
                return searchFilter.filter(data => data.group === value);
            }
    }

    onSelectChange = (value) => {
        this.setState({value : value})
    }

    filterRight(items){
        const { rightSearchName, eFieldNewDataSource } = this.state;
        let itemss = [];
        for(let i = 0; i< items.length; i++){
            for(let j = 0; j < eFieldNewDataSource.length; j++){
                if(items[i] == eFieldNewDataSource[j].id){
                    itemss.push(eFieldNewDataSource[j]);
                    continue;
                }
            }
        }
        if (rightSearchName) {
            itemss = itemss.filter((item)=>item.name.indexOf(rightSearchName.trim()) != -1);
        }
        return itemss;
    }
}

export default EField_Contants;
